<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染v-for</title>
    <script src="/js/vue-2.7.9-dev.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <button @click="add">添加一个人</button>
        <ul> 
            <li v-for="item in persons" :key="item.id">
                {{item.name}}- {{item.age}}
            </li>
        </ul>

        <br/>
        <br/>
        <br/>

        <ul> 
            <li v-for="(item, index) in persons" :key="index">
                {{item.name}}- {{item.age}}- {{index}}
            </li>
        </ul>

        <div v-for="(item, name, index) in car" :key="item.name">
            {{item}}---{{name}}---{{index}}
        </div>

        <div v-for="(item, index) in str" ::key="item">
            {{item}}--{{index}}
        </div>
    </div>

    <script>
        let vm = new Vue({
            data() { 
                console.log("==", this);
                return { 
                    persons: [
                        { id: '001', name: '张三', age: 18 },
                        { id: '002', name: '李四', age: 19 },
                        { id: '003', name: '王五', age: 20 }
                    ],
                    car: {
                        name: '奥迪A8',
                        price4: '70万',
                        color: '黑色'
                    },
                    str: 'hello'
                }
            },
            methods: {
                add(){
                    this.persons.unshift({ id: '004', name: '王五2', age: 22})
                    console.log(this.persons);
                }
            },
        })
        vm.$mount("#app")
        console.log("--",vm);
    </script>
</body>
</html>